<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账单</title>
    <style>
        #tbl{
            width:300px;
            height:20px;
        }
        td{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
<table id="tbl">
    <tr>
        <td>商品名</td>
        <td>数量</td>
        <td>单价</td>
        <td>总价</td>
    </tr>
    <tr>
        <td>乔丹牌篮球鞋</td>
        <td>1双</td>
        <td>998元/双</td>
        <td></td></tr>
    <tr>
        <td>黑人牙膏</td>
        <td>5元/支</td>
        <td>20支</td>
        <td></td></tr>

</table>
<script>
    var tbl=document.getElementById('tbl');
    var trs=tbl.getElementsByTagName('tr');

    for(var i=1;i<trs.length;i++){
        var tds=trs[i].getElementsByTagName('td');
        tds[3].innerText=parseFloat(tds[1].innerText)* parseFloat(tds[2].innerText)+"元";

        if(i%2==1){
            trs[i].style.background='#eee';
        }
    }



</script>
</body>
</html>